<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
      html {
        height: 100%;
      }
      body {
        padding: 0px;
        margin: 0px;
        height: 100%;
      }
      #map {
        width: 100%;
        height: 100%;
      }
      .button, .button-selected {
        margin: 5px;
        cursor: pointer;
        font-family: Arial, sanf-serif;
        font-size: 24px;
        line-height: 160%;
        padding: 0 6px;
        overflow: hidden;
        text-align: center;
        border-radius: 2px;
        -moz-border-radius: 2px;
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
        -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
        -webkit-user-select: none;
        -moz-user-select: none;
      }
 
      .button {
        color: #000;
        border: 1px solid #A9BBDF;
        /* old browsers */
        background: #FEFEFE;
        /* firefox */
        background: -moz-linear-gradient(top, #FEFEFE 0%, #F3F3F3 100%);
        /* webkit */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FEFEFE), color-stop(100%,#F3F3F3));
        /* ie */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#F3F3F3',GradientType=0);
      }
 
      .button-selected, .button:hover {
        border: 1px solid #678AC7;
      }
 
      .button-selected {
        font-weight: bold;
        color: #fff;
        /* old browsers */
        background: #6D8ACC;
        /* firefox */
        background: -moz-linear-gradient(top, #6D8ACC 0%, #7B98D9 100%);
        /* webkit */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6D8ACC), color-stop(100%,#7B98D9));
        /* ie */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6D8ACC, endColorstr='#7B98D9',GradientType=0);
      }
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"> 
 
function initialize() {
 
  var australia = new google.maps.LatLng(-25, 133);
 
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: australia,
    zoom: 4,
    mapTypeId: 'roadmap',
    mapTypeControl: false
  });

      var off = [ { visibility: 'off' } ];
        var style = [
          {
            featureType: "all",
            elementType: "labels",
            stylers: off
          },{
            featureType: "all",
            elementType: "all",
            stylers: [
              { saturation: -100 }
            ]
          },{
            featureType: "poi",
            elementType: "all",
            stylers: off
          },{
            featureType: "landscape",
            elementType: "all",
            stylers: off
          },{
          },{
            featureType: "road",
            elementType: "all",
            stylers: off
          },{
            featureType: "administrative",
            elementType: "all",
            stylers: off
          }
        ];
        map.mapTypes.set('styled', new google.maps.StyledMapType(style));
        map.setMapTypeId('styled');
 
  layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '815230'
    },
    styles: [{
      polygonOptions: {
        fillColor: "#00FF00",
      }
    }, {
      where: "birds > 250",
      polygonOptions: {
        fillColor: "#0000FF"
      }
    }]
  });
  layer.setMap(map);

 // Make the elevation control.
 var control = document.getElementById('control');
 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);

 google.maps.event.addDomListener(
            document.getElementById('birds'),
            'change',
            updateStyle);
}

var timeout;
function updateStyle() {
  var birds = Number(document.getElementById('birds').value);
  if (timeout) {
    window.clearTimeout(timeout);
  }
    
  // Update our display.
  document.getElementById("display").innerHTML = birds;

  timeout = window.setTimeout(function() {
    // Update the query to use the new inequality.
    var styles = layer.get('styles');
    styles[1].where = "birds > " + birds;
    layer.set('styles', styles);
  }, 500);
}

</script> 
</head> 
<body onload="initialize()"> 
  <div id="map_canvas"></div>
  <div id="control" class="button"> 
      <strong>Unique Bird Species</strong><br/> 
      <input type="range" id="birds" min="0" max="500" step="50" value="250"></input><br/> 
      <span id="display">250</span> 
  </div> 
</body> 
</html> 
